<template>

  <div class="page">
    <div class="title">
      工资计算器
    </div>
    <div class="part">
      <mt-field label="实际收佣" type="number" placeholder="请输入你的实际收佣" v-model.number="actualIncome"></mt-field>
    </div>
    <div class="part">
      <mt-field label="内部成本" :value="innerCosts" :readonly="true"></mt-field>
    </div>

    <div class="part">
      <mt-field label="商机个数" type="number" placeholder="资源成本=商机个数*80" v-model.number="busNum"></mt-field>
      <mt-field label="资源成本" :value="resCosts" :readonly="true"></mt-field>
    </div>

    <div class="part">
      <mt-field label="外部成本" type="number" placeholder="银行返点等" v-model.number="outerCosts"></mt-field>
    </div>

    <div class="part">
      <mt-field label="提成业绩" :value="bonus" :readonly="true"></mt-field>
      <mt-field label="目前级别" :value="level" :readonly="true"></mt-field>
      <mt-field label="基础工资" :value="baseSalary" :readonly="true"></mt-field>
      <mt-field label="提成金额" :value="actualEarn" :readonly="true"></mt-field>
      <mt-field label="最终工资" :value="finalSalary" :readonly="true"></mt-field>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Cal',
  data () {
    return {
      actualIncome: null, // 实收佣金
      busNum: null, // 商机个数,
      outerCosts: null,
      LV: {
        'LV1': {
          name: '助理',
          baseSalary: 2500
        },
        'LV2': {
          name: '初级',
          baseSalary: 3000
        },
        'LV3': {
          name: '中级',
          baseSalary: 3500
        },
        'LV4': {
          name: '高级',
          baseSalary: 4000
        },
        'LV5': {
          name: '特级',
          baseSalary: 5000
        }
      },
      bonusLadder: [
        [8000, 15000, 0.1],
        [15000, 40000, 0.2],
        [40000, 80000, 0.25],
        [80000, 150000, 0.3],
        [150000, 200000, 0.35],
        [200000, null, 0.4]
      ]
    }
  },
  filters: {
    positiveInt (value) {
      let nowInt = parseInt(value)
      return nowInt >= 0 ? nowInt : 0
    }
  },
  computed: {
    innerCosts () { // 内部花费
      return this.actualIncome * 0.1
    },
    resCosts () { // 资源花费
      return this.busNum * 80
    },
    bonus () { // 实际业绩
      return this.actualIncome - this.innerCosts - this.resCosts - this.outerCosts
    },
    level () { // 目前岗位级别
      const curLevel = this.getLevel(this.bonus) || 'LV1'
      return this.LV[curLevel].name
    },
    baseSalary () { // 基础工资
      const curLevel = this.getLevel(this.bonus) || 'LV1'
      return this.LV[curLevel].baseSalary
    },
    actualEarn () { // 实际提成
      return this.getLevelBonus(this.bonus)
    },
    finalSalary () { // 最终工资
      return this.actualEarn + this.baseSalary
    }
  },
  methods: {
    getLevel (bonus) {
      if (typeof bonus !== 'number') return ''
      if (bonus < 0) return ''
      if (bonus >= 0 && bonus < 20000) return 'LV1'
      else if (bonus >= 20000 && bonus < 50000) return 'LV2'
      else if (bonus >= 50000 && bonus < 120000) return 'LV3'
      else if (bonus >= 120000 && bonus < 200000) return 'LV4'
      else if (bonus >= 200000) return 'LV5'
    },
    getLevelBonus (bonus) {
      let result = 0
      for (let l = 0; l < this.bonusLadder.length; l += 1) {
        let lad = this.bonusLadder[l]
        if (bonus >= lad[0]) {
          if (lad[0] === 8000) result += (8000 * lad[2])
          if (bonus < lad[1] || !lad[1]) {
            result += (bonus - lad[0]) * lad[2]
            break
          } else {
            result += (lad[1] - lad[0]) * lad[2]
            continue
          }
        } else {
          break
        }
      }
      return result
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #eee;
}
.page > .title {
  width: 100%;
  text-align: center;
  height: 45px;
  line-height: 45px;
  background: rgb(250, 250, 250);
  border-bottom: 1px solid #eee;
}
.page > .title ~ .part {
  margin-top: 0;
}
.page > .part {
  margin: 10px 0;
}
</style>
